<template>
  <div class="container-y">
      <div class="box-list">
        <div class="list">
            <p class="text-title" >课程列表</p>
            <div class="showlist"  v-for="(listItem,bindex) in list" :key="bindex">
               <div class="list-one clearfix">
                   <div class="imgbox">
                       <img :src="listItem.wechatPortrait" alt="">
                   </div>
                   <div class="number-all">
                       <div class="name">{{listItem.teachName}}</div>
                       <div class="text">订单编号:{{listItem.orderNumber}}</div>
                   </div>
                    <div class="btn" @click="goback(listItem.orderNumber,listItem.state)">{{listItem.state|filterPayBack}}</div>
               </div>
               <div class="list-all">
                   <div class="list-item" v-for="(Item,index) in listItem.itemFreeTimes" :key="index">
                       <router-link :to="{ path: '/ClassDetail' ,query:{tid:Item.id,id:index,bid:bindex,userId:userId}}">
                        <div class="item-left">
                            <p class="time">{{Item.freeDate}}</p>
                            <p class="time-data">{{Item.freeTime}}</p>
                        </div>
                        <div class="item-right"  :class='Item.state|filterFunCOl'>{{Item.state|filterFun}}</div>
                       </router-link>
                   </div>
               </div>
            </div>
             <div class="list-big" v-show="show">
                您暂时没有已分配课程，请等待系统分配，或前去报名。如果您在创建订单时意外中断没有提交开课时间，可以进入购买课程页面继续完成订单操作。在提交全部信息后，我们将在12小时内为您分配教师，请耐心等待
             <div class="lose-more"></div>
            </div>
        </div>
      </div>
  </div>
</template>
<script>

export default {
    data(){
    return{
          list:"",
          remark:"",
          value:"",
          userId:"",
          show:false,
          payText:"申请退款"
      }
  },
   mounted(){
    this.getINformation()
    
  },
  created(){
     this.userId=this.$route.query.userId

  },
  filters: {  
    filterFun(status){  
      if(status=="3"){
          return "已结束"
      }else if(status=="2"){
          return "请等待上课"
      }else if(status=="4"){
          return "请等待审核"
      }
    },
    filterPayBack(status){
       if(status=="5"){
          return "已退款"
      }else if(status=="6"){
          return "请等待退款"
      }else if(status=="4"){
          return "已结束"
      }else{
           return "申请退款"
      }
    },
    filterFunCOl(status){  
      if(status=="3"){
          return ""
      }else if(status=="2"){
          return "col-yew"
      }else if(status=="4"){
          return "col-red"
      }
    },
  },
  methods:{
      
      getINformation(){
          this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getOrder?userId='+this.$route.query.userId)
          .then((res) => {
              console.log(res)
               if(res.data.data==""){
               this.show=true
              }else{
                    this.list=res.data.data
              }
          })
      },
      goback(order,orderType){
          this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/refundYesOrNo?orderNum='+order)
          .then((res) => {
              if(res.data.data!=false){
                  if(orderType!="5"&&orderType!="6"&&orderType!="4"){
                      this.goconfirm(order)
                  }
              }else{
                   this.$vux.alert.show({
                    title: 'Sorry',
                    content: "该订单不符合退款的时间要求，请参考退款条款，或与客服人员联系",
                    onShow () {
                        console.log('Plugin: I\'m showing')
                    },
                    onHide () {
                    }
                })
              }
          })
      },
      goconfirm(order){
        const _this = this
      this.$vux.confirm.show({
        title: '申请退款',
        content: '<div class="textare"><textarea class="textareatext" id="textas" placeholder="请填写申请理由"></textarea></div><div class="idors">退款以2周为单位处理，即发起退款日的下周第一个工作日起至订单结束日（不包括调课所引起的课程后延）满2周，则可以获得这两周的课程退款，如有不详，可以咨询网上客服。退款申请会在24小时内处理，感谢您的等待</div>',
        onShow () {
          console.log('promt show')
        },
        onConfirm (msg) {
          _this.gobackend(order)
        }
      })
      },
      gobackend(order){
          let inp=document.getElementById("textas");  
          this.remark=inp.value
          let _this=this
          this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/refundApply?orderNum='+order+"&remark="+this.remark)
          .then((res) => {
             console.log(res)
             _this. getINformation()
          })
      }
  }
}
</script>
<style scoped>
.number-all{
    font-size: 18px;
    color: #333333;
    float: left;
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    padding-left: 30px;
}
.lose-more{
    height:200px ;
    margin-top:80px;
    background: url(../assets/lose-icon.png) no-repeat center center;
    background-size: contain;
}
.list-big{
    flex:1;
    font-size: 36px;
    color: #aaaaaa;
    padding:150px 50px 0 50px;
    background: #fff;
}
div .col-red{
    color: #ff3434
}
div .col-yew{
    color: #ffcc00;
}
.btn{
     width: 162px;
     height:40px;
     line-height: 40px;
     font-size: 28px;
     color: #fff;
     border-radius: 4px;
     background: #ff3434;
     right: 10px;
     position: absolute;
     top:20px;

}
.list-item{
    height: 120px;
    text-align: left;
    border-bottom:1px solid #ededed;
    box-sizing: border-box;
    padding:20px 0;
    font-size: 30px;
    display: flex;
}
 .list-item a{
     display: flex;
     width:100%;
     height: 100%;
 }
.item-right{
    font-size: 30px;
    color:#aaaaaa;
    line-height: 79px;
    padding-right: 60px;
    position: relative;
}
.item-right:after{
  content: '';
  position: absolute;
  top:0;
  right: 10px;
  height: 100%;
  width:20px;
  background: url(../assets/back.png) no-repeat center center;
  background-size:13px 23px ;
}
.item-left{
    flex:1;
}
.time{
    color:#aaaaaa;
    font-size: 26px;
    line-height: 39px;
}
.time-data{
    font-size: 26px;
    color: #666666;
    line-height: 39px;
}
.list-one{
    padding:20px 0;
    position: relative;
}
.name{
    font-size: 34px;
    color: #333333;
    float: left;
    line-height: 60px;
}
.list-one .imgbox{
    height: 100px;
    width: 100px;
    text-align: left;
    float: left;
    overflow: hidden;
    border: 1px solid #fba7a7;
    border-radius: 100%;
    overflow: hidden;
}
 .imgbox img{
     min-height: 100%;
     width:100%;
 }
  .container-y{
      height: 100%;
      width:100%;
      padding:20px 20px 0 20px ;
      background: #f4f4f4;
      position: relative;
      display: flex;
      box-sizing: border-box;
  }
  .box-list{
      background: #fff;
      flex:1;
      padding:0 30px;
      border-radius: 10px;
  }
  .text-title{
      line-height: 82px;
      height: 82px;
      text-align: left;
      font-size: 28px;
      padding-left:20px;
      color: #333333;
      position: relative;
  }
  .text-title:after{
      position: absolute;
      content: "";
      left:0;
      height: 30px;
      border-radius: 4px;
      width: 8px;
      background: #ff3434;
      top:26px;
  }
</style>


